<template>
  <div ref="pieChart01" class="pie-chart-01 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart01 = ref(null);
const echarts = inject("$echarts");

let iconSize = 40; // 图例小圆的大小
let legendSize = 14; // 图例字体大小
let ageOption = [
  {
    value: 67,
    name: "空调设备",
    itemStyle: {
      color: "#E2D674",
    },
  },
  {
    value: 83,
    name: "水表设备",
    itemStyle: {
      color: "#E23F69",
    },
  },
  {
    value: 179,
    name: "给排水设备",
    itemStyle: {
      color: "#009BEC",
    },
  },
  {
    value: 255,
    name: "照明设备",
    itemStyle: {
      color: "#6D8BFF",
    },
  },
  {
    value: 53,
    name: "电表设备",
    itemStyle: {
      color: "#BE85E2",
    },
  },
  {
    value: 90,
    name: "视频监控设备",
    itemStyle: {
      color: "#40CDA8",
    },
  },
];
let leftData = [];
let rightData = [];
for (let i = 0; i < ageOption.length; i++) {
  if (i < ageOption.length / 2) {
    leftData.push(ageOption[i].name);
  } else {
    rightData.push(ageOption[i].name);
  }
}
const option = {
  compCode: "C202312004",
  backgroundColor: "#03171E",
  title: {
    text: "设备总数\n",
    subtext: 727,
    x: "center",
    y: "center",
    textStyle: {
      fontWeight: "normal",
      fontSize: 16,
      color: "#fff",
    },
    subtextStyle: {
      // 在这里设置subtext的文本样式
      fontWeight: "bold",
      fontSize: 16,
      color: "#fff",
    },
  },
  legend: [
    {
      icon: "circle",
      itemStyle: {
        borderColor: "transparent", // 设置边框颜色为透明色
      },
      orient: "vertical",
      left: "100",
      top: "center",
      itemGap: 14,
      padding: 8,
      data: leftData,
      formatter: (name) => {
        let oa = ageOption;
        for (let i = 0; i < oa.length / 2; i++) {
          if (name == oa[i].name) {
            return (
              "{value2|" +
              oa[i].value +
              "}\n\n{namea|" +
              name +
              "}\n\n{value|" +
              oa[i].value +
              "}"
            );
          }
        }
      },
      textStyle: {
        padding: [0, 0, 0, -5],
        rich: {
          namea: {
            color: "#fff",
            width: 56,
            fontSize: legendSize,
          },
          value: {
            color: "#4EA6E6",
            fontSize: legendSize, // 设置数字字体大小
            fontWeight: "bold", // 设置数字字体粗细
          },
          value2: {
            color: "rgba(0,0,0,0)",
            fontSize: legendSize, // 设置数字字体大小
            fontWeight: "bold", // 设置数字字体粗细
          },
        },
      },
    },
    {
      icon: "circle",
      itemStyle: {
        borderColor: "transparent", // 设置边框颜色为透明色
      },
      orient: "vertical",
      left: "800",
      top: "center",
      itemGap: 14,
      padding: 8,
      data: rightData,
      formatter: (name) => {
        let oa = ageOption;
        for (let i = oa.length / 2; i < oa.length; i++) {
          if (name == oa[i].name) {
            return (
              "{value2|" +
              oa[i].value +
              "}\n\n{namea|" +
              name +
              "}\n\n{value|" +
              oa[i].value +
              "}"
            );
          }
        }
      },
      textStyle: {
        padding: [0, 0, 0, -5],
        rich: {
          namea: {
            color: "#fff",
            width: 56,
            fontSize: legendSize,
          },
          value: {
            color: "#4EA6E6",
            fontSize: legendSize, // 设置数字字体大小
            fontWeight: "bold", // 设置数字字体粗细
          },
          value2: {
            color: "rgba(0,0,0,0)",
            fontSize: legendSize, // 设置数字字体大小
            fontWeight: "bold", // 设置数字字体粗细
          },
        },
      },
    },
  ],
  grid: {
    right: 100,
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "45%"],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
          formatter(params, ticket, callback) {
            return "";
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
          length2: 10,
        },
      },
      data: ageOption,
      itemStyle: {
        borderWidth: 10,
        borderColor: "#03171E",
      },
      // borderColor: "rgba(0, 0, 0, 0)",
      emphasis: {
        itemStyle: {
          shadowBlur: 0,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0)",
        },
      },
    },
    {
      type: "pie",
      radius: ["35%", "45%"],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      z: 9,
      label: {
        normal: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
          formatter(params, ticket, callback) {
            return "";
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
          length2: 10,
        },
      },
      data: ageOption.map((item) => ({
        value: item.value,
        name: item.name,
        itemStyle: {
          color: `rgba(${hexToRgb(item.itemStyle.color)}, 0.5)`, // 添加透明度
        },
      })),
      itemStyle: {
        borderWidth: 10,
        borderColor: "#03171E",
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 0,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0)",
        },
      },
    },
    {
      name: "",
      type: "gauge",
      splitNumber: 90, //刻度数量
      radius: "25%", //图表尺寸
      center: ["50%", "50%"],
      zlevel: 10,
      startAngle: 90,
      endAngle: -269.9999,
      axisLine: {
        show: true,
        lineStyle: {
          width: 0,
          shadowBlur: 0,
          color: [[1, "#253D7B"]],
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "auto",
          width: 2,
        },
        length: 20,
        splitNumber: 5,
      },
      splitLine: {
        show: true,
        length: 5,
        lineStyle: {
          color: "auto",
        },
      },
      axisLabel: {
        show: false,
      },
      pointer: {
        //仪表盘指针
        show: 0,
      },
      detail: {
        show: 0,
      },
    },
    {
      //内圈
      type: "pie",
      data: [100],
      z: 3,
      radius: ["0%", "21%"],
      center: ["50%", "50%"],
      itemStyle: {
        color: "rgba(35,71,121,1)",
      },
      silent: true,
      labelLine: {
        normal: {
          show: false,
        },
      },
      label: {
        normal: {
          show: false,
          position: "center",
          textStyle: {
            fontSize: 14,
            color: "#000",
          },
        },
      },
    },
  ],
};
// 辅助函数：将十六进制颜色转换为 RGB 格式
function hexToRgb(hex) {
  // 去除可能的 # 符号
  hex = hex.replace(/^#/, "");

  // 将十六进制颜色转换为 RGB 格式
  let bigint = parseInt(hex, 16);
  let r = (bigint >> 16) & 255;
  let g = (bigint >> 8) & 255;
  let b = bigint & 255;

  return `${r}, ${g}, ${b}`;
}

onMounted(() => {
  const chart = echarts.init(pieChart01.value);
  chart.setOption(option);
});
</script>
